<template>
  <view class="quiz">
    <view v-if="isFinish" class="finish">
      <view v-if="isLock" class="unlock">
        <div class="text">
          <text class="p">恭喜您</text>
          <text class="p">已完成作答</text>
        </div>
        <button class="btn" @click="submit" type="primary">
          观看广告查看结果
        </button>
      </view>
      <view v-else class="result">
        <text class="title">{{ title }}测试结果</text>
        <text class="level">{{ curResult.title }}</text>
        <text class="desc">{{ curResult.desc }}</text>
        <button class="btn btn-home" @click="goHome" type="default">返回首页</button>
      </view>
    </view>
    <view v-else class="content">
      <view class="header">
        <view class="location">
          <text>{{ curIndex + 1 }}</text>
          <text>/</text>
          <text>{{ dataList.length }}</text>
        </view>
        <view class="progress-bar">
          <view class="progress" :style="{ width: `${((curIndex + 1) / dataList.length) * 100}%` }"></view>
        </view>
      </view>
      
      <view class="question">
        <text class="text">{{ curQuizInfo.question }}</text>
      </view>
      
      <view class="answer">
        <text
          class="item"
          @click="selectAnswer(index)"
          v-for="(item, index) in curQuizInfo.answerList"
          :class="{ select: item.select }"
          :key="index"
        >{{ item.answer }}</text>
      </view>
    </view>
    <view class="pub_ad_large_banner">
      <!-- #ifdef MP-TOUTIAO -->
      <ad
        :unit-id="adDouyinResultBottom"
        :ad-intervals="30"
        :fixed="false"
        type="large"
        scale="100"
      />
      <!-- #endif -->
      <!-- #ifdef MP-KUAISHOU -->
      <ad :type="100011054" :unit-id="adKuaishouResultBottom"></ad>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import {
  adVideoCreate,
  adVideoShow,
  showAdConfirmModal,
  adUnitIdDouyinResultBottom,
  adUnitIdKuaishouResultBottom,
} from "@/common/ad";
import { globalData } from "@/enums/dataEnums";
import { jiuxingDataList, jiuxingResultMap } from "@/enums/jiuxing";
import {
  jobInterestTitle,
  jobInterestDataList,
  jobInterestResultList,
} from "@/enums/jobInterest";
import { mbtiTitle, mbtiDataList, mbtiResult } from "@/enums/mbti";
import { sasDataList, sasResultList } from "@/enums/sas";
import { sdsDataList, sdsResultList } from "@/enums/sds";
import { xinliAgeDataList, xinliAgeResultList } from "@/enums/xinliAge";

export default {
  data() {
    return {
      title: "",
      adDouyinResultBottom: adUnitIdDouyinResultBottom,
      adKuaishouResultBottom: adUnitIdKuaishouResultBottom,
      curQuizInfo: {
        question: "",
        score: 0,
        answerList: [],
      },
      curResult: {
        level: null,
        min: null,
        max: null,
        title: "",
        desc: "",
      },
      isLock: true,
      isFinish: false,
      curIndex: 0,
      totalScore: 0,
      mbtiTotalScore: {
        E: 0,
        I: 0,
        S: 0,
        N: 0,
        T: 0,
        F: 0,
        J: 0,
        P: 0,
      },
      jiuxingTotalScore: {
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
        7: 0,
        8: 0,
        9: 0,
      },
      jobInterestTotalScore: {
        R: 0,
        I: 0,
        A: 0,
        S: 0,
        E: 0,
        C: 0,
      },
      dataList: [],
      resultList: [],
      resultMap: {},
      mbtiResult: {},
    };
  },
  onLoad(option) {
    adVideoCreate();
    this.initQuiz();
  },
  methods: {
    initQuiz() {
      let newDataList = [];
      switch (globalData.type) {
        case "mbti":
          newDataList = mbtiDataList;
          this.title = mbtiTitle;
          this.mbtiResult = mbtiResult;
          break;
        case "sds":
          newDataList = sdsDataList;
          this.resultList = sdsResultList;
          break;
        case "sas":
          newDataList = sasDataList;
          this.resultList = sasResultList;
          break;
        case "jiuxing":
          newDataList = jiuxingDataList;
          this.resultMap = jiuxingResultMap;
          break;
        case "jobInterest":
          newDataList = jobInterestDataList;
          this.title = jobInterestTitle;
          this.resultList = jobInterestResultList;
          break;
        case "xinliAge":
          newDataList = xinliAgeDataList;
          this.resultList = xinliAgeResultList;
          break;
      }
      for (let i in newDataList) {
        for (let j in newDataList[i].answerList) {
          newDataList[i].answerList[j].select = false;
        }
      }
      this.dataList = newDataList;
      if (this.dataList.length > 0) {
        this.curQuizInfo = this.dataList[0];
      }
    },
    submit() {
      showAdConfirmModal(() => {
        try {
          adVideoShow(() => {
            this.unLock();
          });
        } catch (error) {
          this.unLock();
        }
      });
    },
    // 返回最高分的键
    getHighestScoreKey(obj) {
      let highestScore = -Infinity;
      let highestScoreKey = null;
      for (const key in obj) {
        if (obj[key] > highestScore) {
          highestScore = obj[key];
          highestScoreKey = key;
        }
      }
      return highestScoreKey;
    },
    // 解锁
    unLock() {
      let curType = "";
      switch (globalData.type) {
        case "mbti":
          curType = "";
          if (this.mbtiTotalScore.E > this.mbtiTotalScore.I) {
            curType += "E";
          } else {
            curType += "I";
          }
          if (this.mbtiTotalScore.S > this.mbtiTotalScore.N) {
            curType += "S";
          } else {
            curType += "N";
          }
          if (this.mbtiTotalScore.T > this.mbtiTotalScore.F) {
            curType += "T";
          } else {
            curType += "F";
          }
          if (this.mbtiTotalScore.J > this.mbtiTotalScore.P) {
            curType += "J";
          } else {
            curType += "P";
          }
          if (this.mbtiResult[curType]) {
            this.curResult.title = this.mbtiResult[curType].code;
            this.curResult.desc = this.mbtiResult[curType].desc;
          }
          break;
        case "jiuxing":
          curType = "";
          let keys = Object.keys(this.jiuxingTotalScore).map(Number);
          curType = Math.max(...keys);
          if (this.resultMap[curType]) {
            this.curResult = this.resultMap[curType];
          }
          break;
        case "jobInterest":
          curType = this.getHighestScoreKey(this.jobInterestTotalScore);
          for (let i in this.resultList) {
            if (curType == this.resultList[i].type) {
              this.curResult = this.resultList[i];
            }
          }
          break;
        default:
          for (let i in this.resultList) {
            if (
              this.totalScore >= this.resultList[i].min &&
              this.totalScore <= this.resultList[i].max
            ) {
              this.curResult = this.resultList[i];
            }
          }
          break;
      }
      this.isLock = false;
    },
    selectAnswer(index) {
      let curAnswer = this.dataList[this.curIndex].answerList;
      for (let i in curAnswer) {
        curAnswer[i].select = false;
      }
      curAnswer[index].select = true;
      switch (globalData.type) {
        case "mbti":
          for (let i in this.mbtiTotalScore) {
            if (i == curAnswer[index].value) {
              this.mbtiTotalScore[i] += 1;
            }
          }
          break;
        case "jobInterest":
          for (let i in this.jobInterestTotalScore) {
            if (i == curAnswer[index].value) {
              this.jobInterestTotalScore[i] += 1;
            }
          }
          break;
        case "jiuxing":
          for (let i in curAnswer[index].value) {
            for (let j in this.jiuxingTotalScore) {
              if (j == curAnswer[index].value[i]) {
                this.jiuxingTotalScore[j] += 1;
              }
            }
          }
          break;
        default:
          // 常规计分
          this.totalScore += curAnswer[index].value;
          break;
      }
      if (this.curIndex < this.dataList.length - 1) {
        setTimeout(() => {
          this.curIndex += 1;
          this.curQuizInfo = this.dataList[this.curIndex];
        }, 1000);
      } else {
        setTimeout(() => {
          this.isFinish = true;
        }, 1000);
      }
    },
    back() {
      if (this.curIndex > 0) {
        this.curIndex -= 1;
      } else {
        uni.navigateTo({
          url: "/pages/index/index",
        });
      }
    },
    goHome() {
      uni.navigateTo({
        url: "/pages/index/index",
      });
    },
  },
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
.quiz {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  padding: 20px;
  
  .content {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid #f0f0f0;
      
      .location {
        font-size: 28px;
        color: #333;
        font-weight: 500;
        
        text {
          &:nth-child(2) {
            margin: 0 8px;
            color: #999;
          }
        }
      }
      .progress-bar {
        width: 100%;
        height: 6px;
        background: #f0f0f0;
        border-radius: 3px;
        margin-left: 10px;
        overflow: hidden;
        
        .progress {
          height: 100%;
          background: linear-gradient(90deg, #6e8efb 0%, #a777e3 100%);
          transition: width 0.3s ease;
        }
      }
    }
    
    .quiz-info {
      padding: 20px;
      display: flex;
      justify-content: space-around;
      background: #f8f9fa;
      border-radius: 12px;
      margin: 20px;
      
      .info-item {
        display: flex;
        align-items: center;
        
        .icon {
          font-size: 24px;
          margin-right: 8px;
        }
        
        .text {
          font-size: 24px;
          color: #666;
        }
      }
    }
    
    .question {
      padding: 30px 20px;
      
      .text {
        font-size: 28px;
        line-height: 1.6;
        color: #333;
        font-weight: 500;
      }
    }
    
    .answer {
      padding: 0 20px 30px;
      
      .item {
        width: 100%;
        display: block;
        box-sizing: border-box;
        margin-bottom: 16px;
        padding: 20px;
        text-align: center;
        background: #f8f9fa;
        border-radius: 12px;
        color: #333;
        font-size: 26px;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        
        &:active {
          transform: scale(0.98);
        }
        
        &:last-child {
          margin-bottom: 0;
        }
        
        &.select {
          background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
          color: #fff;
          border-color: #6e8efb;
          box-shadow: 0 4px 15px rgba(110, 142, 251, 0.2);
        }
      }
    }

    .tips {
      margin: 30px 20px;
      padding: 20px;
      background: #fff8e6;
      border-radius: 12px;
      border: 1px solid #ffe4a3;
      
      .tip-title {
        display: block;
        font-size: 26px;
        color: #ff9500;
        font-weight: 500;
        margin-bottom: 12px;
      }
      
      .tip-item {
        display: block;
        font-size: 24px;
        color: #666;
        line-height: 1.6;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.finish {
  padding: 40px 20px;
  
  .unlock {
    background: #fff;
    border-radius: 20px;
    padding: 40px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    
    .text {
      .p {
        display: block;
        text-align: center;
        font-size: 36px;
        color: #333;
        font-weight: 600;
        margin-bottom: 10px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    
    .btn {
      margin-top: 40px;
      background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
      border: none;
      color: #fff;
      font-size: 28px;
      padding: 20px 0;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(110, 142, 251, 0.2);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
  
  .result {
    background: #fff;
    border-radius: 20px;
    padding: 40px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    
    .title {
      display: block;
      font-size: 34px;
      margin-bottom: 30px;
      color: #333;
      font-weight: 600;
    }
    
    .level {
      display: block;
      font-size: 32px;
      margin-bottom: 30px;
      color: #6e8efb;
      font-weight: 600;
    }
    
    .desc {
      display: block;
      text-align: left;
      font-size: 26px;
      line-height: 1.6;
      color: #666;
    }
  }
}

.pub_ad_large_banner {
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
}

.btn {
  margin-top: 40px;
  background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
  border: none;
  color: #fff;
  font-size: 28px;
  padding: 20px 0;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(110, 142, 251, 0.2);
  transition: all 0.3s ease;
  &:active {
    transform: scale(0.98);
  }
}

.btn-home {
  margin-top: 32px;
  background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
  color: #fff;
  border-color: #6e8efb;
  box-shadow: 0 4px 15px rgba(110, 142, 251, 0.2);
  font-weight: 600;
  transition: all 0.3s;
}
</style>
